<!DOCTYPE HTML>
<html>
  <head>
    <title>MovieSearchApp</title>

	<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
	
	<script src="movieapp.js"></script>	
	<style type="text/css">
	  	h1
	  	{text-align: center; color: #green;}
  	  	p
	  	{font-size: 12px;}
	  	
	  	#realtimetitle
	  	{margin: 6px; padding: 6px; float: left;}
		
		video
		{
			width: 150px;
			position:relative;
			left:50%;
			margin-left: 75px;
		}
	 </style>
	 
  </head>
  <body>  
  	<div data-role="page" id="usersearchpage">
	  	<div data-role="header">
	  		<h1>Naver Movie</h1>
	  	</div> 
	  	<div data-role="content">
	  			<p> * 영화 제목을 검색해 보세요! </p>
	  			<input type="search" id="movieName" value="" autocomplete="on" >
	  			<input type="button" id="callXML" value="검색">
			<div id="result">
				<ul data-role="listview" id="resultlist" data-inset="true" data-split-theme="a">
				</ul>
			</div>
	   	</div>
   		<div data-role="footer" data-position="fixed">
			<div data-role="navbar">
				<ul>
		   			<li id="usersearch"><a href="#" class="ui-btn-active" data-icon="search">영화검색</a></li>
		   			<li id="searchonline"><a href="#realtimesearchpage" data-icon="star">실시간순위</a></li>
		   			<li id="reservemovie"><a href="#reservecallpage" data-icon="check">영화예매</a></li>
		   			<li id="teaser"><a href="#teaserpage" data-icon="info">예고편 감상</a></li>
				</ul>
			</div>
		</div> 
   	</div>

   	<div data-role="page" id="realtimesearchpage">
	  	<div data-role="header">
	  		<h1>Naver Movie</h1>
	  	</div> 
	  	 
	  	<div data-role="content">
			<p id="realtimetitle"> *실시간 급상승 영화검색어 입니다.</p>
			<input id="refreshbtn" type="button" data-icon="refresh" data-iconpos="notext">
			<div id="result">
				<ul data-role="listview" id="realtimelist" data-inset="true" data-split-theme="a">
				</ul>
			</div>
	   	</div>
   		
   		<div data-role="footer" data-position="fixed">
			<div data-role="navbar">
				<ul>
		   			<li id="usersearch"><a href="#usersearchpage" data-icon="search">영화검색</a></li>
		   			<li id="searchonline"><a href="#" class="ui-btn-active" data-icon="star">실시간순위</a></li>
		   			<li id="reservemovie"><a href="#reservecallpage" data-icon="check">영화예매</a></li>
		   			<li id="teaser"><a href="#teaserpage" data-icon="info">예고편 감상</a></li>
				</ul>
			</div>
		</div> 
   	</div>
   	
   	<div data-role="page" id="reservecallpage">
	  	<div data-role="header">
	  		<h1>Naver Movie</h1>
	  	</div> 
	  	 
	  	<div data-role="content">
			<div id="result">
				<a href="http://ticket.movie.naver.com/Ticket/Reserve.aspx" data-role="button" data-theme="b">네이버 인터넷 예매</a>
				<br>
				<br>
				<ul data-role="listview" id="tellist" data-inset="true" data-split-theme="a">
				<li data-role="list-divider">전화예매</li>
				<li><a href="tel:15442280">CGV</a></li> 
				<li><a href="tel:15448855"> 롯데시네마</a></li> 
				<li><a href="tel:15440600">메가박스</a></li>
				</ul>
			</div>
	   	</div>
   		
   		<div data-role="footer" data-position="fixed">
			<div data-role="navbar">
				<ul>
		   			<li id="usersearch"><a href="#usersearchpage" data-icon="search">영화검색</a></li>
		   			<li id="searchonline"><a href="#realtimesearchpage" data-icon="star">실시간순위</a></li>
		   			<li id="reservemovie"><a href="#" class="ui-btn-active" data-icon="check">영화예매</a></li>
		   			<li id="teaser"><a href="#teaserpage" data-icon="info">예고편 감상</a></li>
				</ul>
			</div>
		</div> 
   	</div>
   	 
   	<div data-role="page" id="teaserpage">
	  	<div data-role="header">
	  		<h1>Naver Movie</h1>
	  	</div> 
	  	 
	  	<div class="container">
			<video id="videoplay"  height="100" width="150" > 
	   			<!-- <source src="BigBuck.mp4"> 
	   			<source src="BigBuck.mp4" type="video/mp4">--> 
					   			  
				<source src="http://www.w3schools.com/html5/movie.mp4"> 
	      		<source src="http://www.w3schools.com/html5/movie.webm"> 
	      		<source src="http://www.w3schools.com/html5/movie.ogg">  
			</video> 
			<input type="button" id="palybtn" value="Play"> 
	   	</div>
   		
   		<div data-role="footer" data-position="fixed">
			<div data-role="navbar">
				<ul>
		   			<li id="usersearch"><a href="#usersearchpage" data-icon="search">영화검색</a></li>
		   			<li id="searchonline"><a href="#realtimesearchpage" data-icon="star">실시간순위</a></li>
		   			<li id="reservemovie"><a href="#reservecallpage" data-icon="check">영화예매</a></li>
		   			<li id="teaser"><a href="#" class="ui-btn-active" data-icon="info">예고편 감상</a></li>
				</ul>
			</div>
		</div> 
   	</div>
  </body>
</html>
